<!DOCTYPE html>
<html lang="zh-CN" class="wa-dark wa-theme-default wa-palette-default wa-brand-blue">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TTS 界面配置</title>

    <link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.4/dist/styles/themes/default.css" />
    <link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.4/dist/styles/webawesome.css" />
    <script defer type="module"
        src="https://early.webawesome.com/webawesome@3.0.0-beta.4/dist/webawesome.loader.js"></script>

    <style>
        body {
            opacity: 0;
        }

        body.ready {
            opacity: 1;
            transition: .25s opacity;
        }

        :not(:defined) {
            visibility: hidden;
        }
    </style>

    <script type="module">
        await Promise.allSettled([
            'wa-select',
        ].map(i => customElements.whenDefined(i)));
        document.body.classList.add('ready');
    </script>

    <script type="module">
        if (location.search.includes('debug') || sessionStorage.getItem('debug')) {
            sessionStorage.setItem('debug', 1)
            import('https://cdn.jsdmirror.com/npm/vconsole@latest/dist/vconsole.min.js').then(() => {
                new window.VConsole()
            })
            // import('https://cdn.jsdmirror.com/npm/eruda').then(() =>{
            //   eruda.init()
            // })
        }
    </script>
</head>

<body class="wa-grid wa-gap-s" style="--min-column-size:40vw; padding: 10px;">
    <wa-card>
        <wa-textarea name="text" v-model="form.text" label="文本：" resize="auto" required></wa-textarea>
    </wa-card>
    <wa-card>
        <div class="wa-stack">
            <wa-select name="voice" required label="语音：" v-model="form.voice" :value="form.voice">
                <template v-for="(langVoices, lang) in voices">
                    <small v-text="lang"></small>
                    <wa-option v-for="voice in langVoices" :value="voice.ShortName"
                        v-text="voice.FriendlyName"></wa-option>
                    <wa-divider></wa-divider>
                </template>
            </wa-select>
            <wa-slider label="音速：" name="rate" v-model="form.rate" min="-100" max="100" with-tooltip>
                <span slot="reference">-100%</span>
                <span slot="reference">-50%</span>
                <span slot="reference">-0%</span>
                <span slot="reference">50%</span>
                <span slot="reference">100%</span>
            </wa-slider>

            <wa-slider label="音调：" name="pitch" v-model="form.pitch" min="-100" max="100" with-tooltip>
                <span slot="reference">-100Hz</span>
                <span slot="reference">-50Hz</span>
                <span slot="reference">-0Hz</span>
                <span slot="reference">50Hz</span>
                <span slot="reference">100Hz</span>
            </wa-slider>
            <wa-slider label="音量：" name="volume" v-model="form.volume" min="-100" max="100" with-tooltip>
                <span slot="reference">-100%</span>
                <span slot="reference">-50%</span>
                <span slot="reference">-0%</span>
                <span slot="reference">50%</span>
                <span slot="reference">100%</span>
            </wa-slider>
            <script type="module">
                const sliders = document.querySelectorAll('wa-slider');

                customElements.whenDefined('wa-slider').then(() => {
                    sliders.forEach(slider => {
                        const unit = {
                            pitch: 'Hz'
                        }[slider.getAttribute('name')] || '%';
                        slider.valueFormatter = value => `${value}${unit}`;
                    })
                });
            </script>
        </div>
    </wa-card>
    <div class="wa-span-grid wa-align-items-center wa-stack" style="text-align: center;">
        <wa-button @click="audio.generate">生成音频</wa-button>
        <audio v-if="audio.src.value" :src="audio.src.value" controls></audio>
    </div>

    <script type="module">
        import { createApp, ref, reactive } from 'https://cdn.jsdmirror.com/npm/vue@3.5.18/dist/vue.esm-browser.prod.js'

        const app = createApp({
            setup() {
                const form = reactive({
                    voice: 'zh-CN-XiaoxiaoNeural',
                    text: '你好，世界!',
                    rate: 0,
                    pitch: 0,
                    volume: 0
                })
                const voices = ref({})
                const audio = {
                    src: ref(''),
                    generate() {
                        audio.src.value = `${location.origin + location.pathname}?ac=tts&${new URLSearchParams(form).toString()}`
                        console.log(audio.src.value);

                    }

                }

                fetch('?ac=voices').then(r => r.json()).then(res => {
                    voices.value = res
                })

                return {
                    voices,
                    audio,
                    form
                }
            }
        })

        app.config.compilerOptions.isCustomElement = (tag) => {
            return tag.startsWith('wa-')
        }

        app.mount('body')
    </script>
</body>

</html>